
<script >

// import { GoodsInfo, Spec, SpecValue } from '@/types/data.d'
// import bwPowerSet from '@/vendor/powerSet'
export default {
  props: {
    goods: {
      type: Object

    },
    skuId: {
      type: String

    }

  },
  setup(props) {
    // initSelectedStatus(props.goods, props.skuId)
    return { changeSelected }
  }
}

// const emit = defineEmits(['changeSku'])

/**
 * 选中规格
 * @param item
 * @param sub
 */
const changeSelected = (item, sub) => {
  // 如果规格是禁用，直接不操作
  if (sub.disabled) return
  if (sub.selected) {
    // 如果已经是选中了，取消选中
    sub.selected = false
  } else {
    // 把同级所有(包括sub)的全部取消选中
    item.values.forEach((v) => (v.selected = false))
    // 让sub选中
    sub.selected = true
  }
}

// const initSelectedStatus = (goods, skuId) => {
//   // 找到具体的规格
//   const sku = goods.skus.find(sku => sku.id === skuId)
//   // 设置对应的按钮selected为true
//   if (sku) {
//     const selectArr = sku.specs.map(it => it.valueName)
//     console.log('找到具体的规格', selectArr, sku)
//     goods.specs.forEach((spec, idx) => {
//       spec.values.forEach(value => {
//         value.selected = value.name === selectArr[idx]
//       })
//     })
//   }
// }

</script>
<template>
  <div class="goods-sku">
    <!-- 一个规格 -->
    <dl v-for="item in goods.specs" :key="item.name">
      <dt>{{ item.name }}</dt>
      <dd>
        <!-- 一个规格有多个值 -->
        <template v-for="sub in item.values" :key="sub.name">
          <img
            @click="changeSelected(item, sub)"
            v-if="sub.picture"
            :src="sub.picture"
            alt=""
            :title="sub.name"
            :class="{ selected: sub.selected, disabled: sub.disabled }"
          />
          <span
            :class="{ selected: sub.selected, disabled: sub.disabled }"
            @click="changeSelected(item, sub)"
            v-else
            >{{ sub.name }}</span
          >
        </template>
      </dd>
    </dl>
  </div>
</template>

<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
